<template>
  <view>
    <view class="nav">
      <view class="iconfont icon-xiangzuo" @click="back"></view>
      <text>职位详情</text>
      <view></view>
    </view>
    <view class="bottom">
      <view class="item" :class="['item',{'color-primary':recordStatus}]" @click="signUp">
        <view class="iconfont icon-wyzp"></view>
		<text>{{recordStatus?'已':''}}应聘</text>
      </view>
      <view :class="['item',{'color-primary':collection}]" @click="collect">
        <view :class="['iconfont',collection?'icon-shoucang1':'icon-shoucang']"></view>
        <text>{{collection?'已':''}}收藏</text>
      </view>
      <button class="connect" @click="connect" open-type="contact">
        立即咨询
      </button>
    </view >
    <view class="title">
      <view>{{detail.name}}</view>
      <text>{{detail.payLowerLimit}}k - {{detail.payUpperLimit}}k</text>
      <!-- <text class="pay">10k-15k</text> -->
    </view>
    <view class="condition">
      <!-- <view class="iconfont icon-weizhi">
        <text>{{companyData.site}}</text>
      </view> -->
      <view class="iconfont icon-work">
        <text>
			<text v-if='detail.workExperienceLowerLimit'>{{detail.workExperienceLowerLimit? detail.workExperienceLowerLimit : 0}} -</text>
			<text v-if='detail.workExperienceUpperLimit'>{{detail.workExperienceUpperLimit}}</text>
		年</text>
      </view>
      <view class="iconfont icon-xueli">
        <!-- <text>{{item.edu}}</text> -->
        <text>{{changeStatus(detail.educationalRequirements)}}</text>
      </view>
    </view>
    <!-- <view class="bo">
      <view class="bo-info">
        <view class="pic">
          <image src="../../static/uni.png"></image>
        </view>
        <view class="info">
          <view class="name">
            梁先生<text>刚刚活跃</text>
          </view>
          <view class="company">
            廊坊新创·总经理
          </view>
        </view>
      </view>
      <view class="iconfont icon-right"></view>
    </view> -->
    <view class="detail">
      <view class="detail-title">
        职位详情
      </view>
      <view class="tags">
        <!-- <view class="tag" v-for="(items,index) in item.tags.split(',')" :key="index">{{items}}</view> -->
		<view class="text-desc">
			<text class="titleName">岗位描述：</text>
			<text class="desc">{{detail.jobDescription}}</text>
		</view>
      </view>
      <view class="text-desc">
			<text class="titleName">工作职责：</text>
			<text class="desc">{{detail.jobDuties}}</text> 
      </view>
    </view>
    <!-- <view class="bo border-bottom-none" @click="companyClick">
      <view class="bo-info">
        <view class="pic">
          <image :src="companyData.logo"></image>
        </view>
        <view class="info">
          <view class="name normal">
            {{companyData.name}}
          </view>
          <view class="company">
            企业规模：{{companyData.scale}}
          </view>
        </view>
      </view>
      <view class="iconfont icon-right"></view>
    </view> -->
    <!-- <view class="map" >
      <map 
		  style="width: 100%;height:100%" 
		  :latitude="map.latitude" 
		  :longitude="map.longitude" 
		  scale="11" 
		  :markers="markers" 
		  show-location="true" 
	  />
    </view> -->
	<!-- <view class="d-flex justify-content-between mt-3-1" @click="goLoaction(map)"> -->
	<!-- <view class="d-flex justify-content-between mt-3-1">
		<view>
			<uni-icons type="location" size="15" class="text-primary mr-1"></uni-icons>
			{{ companyData.site }}
		</view>
	</view> -->
    <!-- <view class="tips">
      <view class="iconfont icon-safe">
        <text>安全提示</text>
      </view>
      <view class="item">
        ·严禁用人单位做出任何损害求职者合法权益的违法违规行为，包括但不限于扣押求职者证件、收集求职者财物、向求职者集资、让求职者入股、诱导求职者异地入职、异地参加培训等，您一旦发现此类行为，<text
          class="report">请立即举报</text></view>
      <view class="item" @click="xxx">·了解更多职场安全防范知识<text class="iconfont icon-right"></text></view>
    </view> -->
    <view class="others">
      <view class="til">
        该公司其他岗位
      </view>
	  <view v-if='otherErs && otherErs.length'>
		  <work-item
			  class='workItem'
			  v-for="item in otherErs" 
			  :key="item.job_id" 
			  :item="item"
		  >
		    <view class="line"></view>
		  </work-item>
	  </view>
	  <view v-else class="nodata"> 暂无 </view>
    </view>
  </view>
</template>

<script>
import workItem from '../../components/workItem.vue';
  export default {
    data() {
      return {
        // 接收从position传过来的
        item: {
			tags: 'python,java,js,node'
		},
        // 接收请求过来得数据
        detail: {},
		companyData: {},
        collection: false,
        recordStatus: false,
        jobList:[],
        offset:0,
		map: {
			latitude:23.106574, //纬度
			longitude:113.324587,//经
		},
		markers: [],
		otherErs: [],
		id: ''
      }
    },
    onLoad(options) {
	  if(options.from === 'collection') {
		  const {id} = options;
		  this.id = id;
		  this.getDetailData(id);
	  } else {
		  if(options.from === 'enrolled') {
			  const {id} = options;
			  this.id = id;
			  this.getDetailData(id);
		  } else {
			  const {id} = JSON.parse(decodeURIComponent(options.detail));
			  this.id = id;
			  this.getDetailData(id);
		  }
	  }
    },
	components:{
		workItem
	},
    methods: {
		getDetailData(id) {
			this.$api.jobDetail(id).then(res=>{
				if(res.code === 200) {
					this.detail = res.data;
					this.collection = res.data.collectStatus;
					this.recordStatus = res.data.recordStatus;
					this.otherErs = res.data.otherErs;
					// console.log('this.datail.companyId',res.data.companyId);
					this.getCompanyData(res.data.companyId);
				}
			})
		},
		getCompanyData(id) {
			this.$api.companyDetail(id).then(res=>{
				if(res.code === 200) {
					this.companyData = res.data;
					this.map.latitude = res.data.latitude;
					this.map.longitude = res.data.longitude;
					this.markers = [
					  {
						id: 1,
						title: '',
						latitude: this.map.latitude,
						longitude: this.map.longitude,
						height: 30,
						width: 30,
						// iconPath: 'http://cdn.duanqinghua.com/duanqinghua/img/55.jpg'
						iconPath: '/static/location.png'
					  }
					]
				}
			})
		},
		// 位置导航
		goLoaction(info){
			uni.openLocation({
				latitude: Number(info.latitude),
				longitude: Number(info.longitude),
				name: info.address,
				address: info.address,
				success: function () {
					console.log('success');
				}
			});
		},
		xxx() {
			console.log(this.detail)
		},
		back() {
			uni.navigateBack()
		},
		// 点击立即沟通
		connect() {
			// if(!this.$store.state.hasLogin) return console.log('必须登陆后才行')
			// let index = null
			// this.$store.state.userList.map((item, i) => {
			//   if (item.user_id === this.item.user_id) {
			// 	index = i
			//   }
			// })
			// if (this.$store.state.userList.findIndex(item => item.user_id === this.item.user_id)<0) {
			//   this.$store.state.userList.push({
			// 	u_name: this.item.u_name,
			// 	company: this.item.short_name,
			// 	position: this.item.position,
			// 	u_pic: this.item.u_pic,
			// 	user_id: this.item.user_id,
			// 	socket_id: this.detail.socket_id,
			// 	chats: []
			//   })
			// }
			// uni.navigateTo({
			//   url: "../conversation/conversation?user_id=" + this.item.user_id
			// })
		},
		signUp() {
			let params = {
				erId: this.detail.id
			}
			if(this.recordStatus) {
				uni.showToast({
				    title: '已经应聘过了~',
				    icon: 'none',
				    duration: 2000
				})
				// uni.showModal({
				// 	title: '提示',
				// 	content: '确定删除？',
				// 	cancelText: "取消", // 取消按钮的文字  
				// 	confirmText: "确认", // 确认按钮的文字  
				// 	showCancel: true, // 是否显示取消按钮，默认为 true
				// 	confirmColor: '#f55850',
				// 	cancelColor: '#39B54A',
				// 	success: (res) => {
				// 		if(res.confirm) {  
				// 			console.log('comfirm') //点击确定之后执行的代码
				// 		} else {  
				// 			console.log('cancel') //点击取消之后执行的代码
				// 		}  
				// 	} 
				// })
			} else {
				this.$api.setSingUp(params).then(res=>{
					if(res.code === 200) {
						uni.showToast({
						    title: '应聘成功',
						    icon: 'none',
						    duration: 2000
						});
						this.getDetailData(this.id);
					} else {
						uni.showToast({
						    title: res.msg,
						    icon: 'none',
						    duration: 2000
						})
					}
				})
			}
			
			
		},
		companyClick() {
			uni.navigateTo({
			  url:"/pages/companyDetail/companyDetail?id=" + this.detail.companyId
			})
		},
		// 学历转换
		changeStatus(type) {
			switch(type) {
				case 0: 
					return '大专及以下';
				case 1:
					return '普本';
				case 2:
					return '双一流';
				case 3:
					return '硕士研究生';
				case 4:
					return '博士研究生';
				default:
					return '';
			}
		},
		collect() {
			let params = {
				companyId: '',
				erId: this.detail.id
			}
			if(this.collection) {
				uni.showModal({
					title: '提示',
					content: '确定取消收藏？',
					cancelText: "取消", // 取消按钮的文字  
					confirmText: "确认", // 确认按钮的文字  
					showCancel: true, // 是否显示取消按钮，默认为 true
					confirmColor: '#39B54A',
					cancelColor: '#39B54A',
					success: (res) => {
						if(res.confirm) {  
							this.$api.del_collectJob(params).then(res1=>{
								if(res1.code === 200) {
									uni.showToast({
										title: '取消收藏成功',
										icon: 'none',
										duration: 2000
									});
									this.getDetailData(this.id);
								} else {
									uni.showToast({
										title: res1.msg,
										icon: 'none',
										duration: 2000
									})
								}
							})
						} else {  
							console.log('cancel') //点击取消之后执行的代码
						}
					} 
				})
			} else {
				this.$api.collectJob(params).then(res=>{
					if(res.code === 200) {
						uni.showToast({
						    title: '收藏成功',
						    icon: 'none',
						    duration: 2000
						});
						this.getDetailData(this.id);
					} else {
						uni.showToast({
						    title: res.msg,
						    icon: 'none',
						    duration: 2000
						})
					}
				})
			}
		}
    }
  }
</script>

<style lang="scss">
  page {
    width: 680rpx;
    // 84
    // padding: 0 35rpx 180rpx;
    padding-bottom: 180rpx;
  }

  .nav {
    width: 680rpx;
    padding: 58rpx 0 0;
    height: 92rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 34rpx;
    font-weight: bold;
    position: fixed;
    top: var(--window-top);
    z-index: 10;
    background: #FFF;
    .iconfont {
      height: 92rpx;
      line-height: 92rpx;
      // padding-right: 20rpx;
    }
  }

  .title {
    width: 680rpx;
    padding: 200rpx 0 0;
    display: flex;
    justify-content: space-between;
    align-content: center;
    font-weight: bold;

    view {
      font-size: 40rpx;
	  line-height: 50rpx;
      // max-width: 380rpx;
    }

    text {
      font-size: 30rpx;
      color: $uni-primary;
      display: flex;
      align-items: center;
    }
  }

  .condition {
    display: flex;
    flex-wrap: wrap;
    margin-top: 20rpx;
    padding: 0 0;

    .iconfont {
	  display: flex;
      margin-right: 40rpx;
      color: $uni-text-color;

      text {
        margin-left: 10rpx;
        font-size: 28rpx;
      }
    }
  }

  .bo {
    width: 680rpx;
    height: 106rpx;
    margin-top: 50rpx;
    border-top: 1rpx solid #F1F1F1;
    border-bottom: 1rpx solid #F1F1F1;
    display: flex;
    padding: 0 0;
    justify-content: space-between;
    align-items: center;

    .bo-info {
      display: flex;
	  line-height: 98rpx;

      .pic {
        margin-right: 30rpx;
        width: 98rpx;
        height: 98rpx;
        border-radius: 50%;

        image {
          width: 98rpx;
          height: 98rpx;
          border-radius: 50%;
        }
      }

      .info {
        height: 98rpx;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .name {
          font-size: 32rpx;
          font-weight: bold;

          text {
            font-size: 22rpx;
            color: $uni-text-color-grey;
            margin-left: 20rpx;
          }
        }

        .normal {
          font-weight: normal;
        }

        .company {
          font-size: 28rpx;
        }
      }
    }

    .iconfont {
      color: $uni-text-color-grey;
    }
  }

  .detail {
    width: 680rpx;
    padding: 0 0;
    margin-top: 52rpx;

    .detail-title {
      font-size: 38rpx;
      font-weight: bold;
    }

    .tags {
      display: flex;
      flex-wrap: wrap;
      margin-top: 34rpx;

      .tag {
        margin-right: 16rpx;
        background-color: $uni-bg-color-grey;
        color: #666;
        padding: 0 20rpx;
        font-size: 28rpx;
        margin-bottom: 20rpx;
      }
    }

    .text-desc {
		display: flex;
		justify-content: space-between;
		
		font-size: 28rpx;
		color: #666;
		.titleName{
			width: 150rpx;
			font-weight: 700;
		}
		.desc{
			flex: 1;
		}
    }
  }

  .map {
    width: 680rpx;
    height: 456rpx;
    // margin-left: 35rpx;
    background: grey;
    border-radius: 20rpx;
  }

  .border-bottom-none {
    border-bottom: none;
  }

  .tips {
    width: 680rpx;
    margin-top: 50rpx;
    padding: 55rpx 0;
    border-top: 1rpx solid #F1F1F1;
    border-bottom: 1rpx solid #F1F1F1;

    .iconfont {
      font-weight: bold;
      font-size: 30rpx;
      color: #558EF7;
      margin-bottom: 10rpx;

      text {
        color: #000;
        margin-left: 10rpx;
      }
    }

    .item {
      color: #666;
      font-size: 26rpx;
      margin-top: 10rpx;
      text-indent: -30rpx;
      padding-left: 30rpx;

      .iconfont {
        color: $uni-text-color-grey;
        font-size: 26rpx;
        margin-left: 20rpx;
      }

      .report {
        color: #5888CF;
        text-decoration: underline;
      }
    }
  }
  .bottom {
    width: 680rpx;
    height: 142rpx;
    padding: 0 35rpx;
    border-top: 1rpx solid #F1F1F1;
    background: #fff;
    position: fixed;
    bottom: var(--window-bottom);
    left: 0;
	z-index: 10;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .connect {
      width: 492rpx;
      height: 84rpx;
      background: $uni-primary;
      border-radius: 20rpx;
      color: $uni-text-color-inverse;
      line-height: 84rpx;
      text-align: center;
	  overflow: hidden;
    }
    .color-primary {
      color: $uni-primary;
    }

    .item {
      text-align: center;

      .iconfont {
        height: 32rpx;
        line-height: 32rpx;
      }

      .icon-share {
        font-size: 32rpx;
      }

      .icon-shoucang,.icon-shoucang1 {
        font-size: 44rpx;
      }

      text {
        font-size: 24rpx;
      }
    }

  }

  .others{
    width: 680rpx;
	margin-top: 52rpx;
    .til {
      width: 680rpx;
      padding: 20rpx 0;
      font-weight: bold;
      font-size: 38rpx;
    }
    .line {
      width: 680rpx;
      height: 2rpx;
      background: #F2F2F2;
      margin-top: 20rpx;
    }
	.workItem{
		width:100%;
	}
  }
  .nodata{
	  font-size: 28rpx;
  }
</style>
